<template>
    <div  class="cindextemplate">
        <div class="cindexdivtitle">我的应用</div>
        <div class="cindexdiv" v-for="(item,i) in mymodeList" :key="i">
            <MyIndexMode :msg="item"/>
            <button class="cdelbtn cbtn" @click="delmode(mymodeList,i)">删除</button>
            <button class="upbtn cbtn" @click="modeup(mymodeList,i)">上移</button>
        </div>
        <div class="cindexdiv">
            <MyIndexMode :msg="myaddmode"/>
            <button class="cbtn">样例</button>
        </div>
    </div>
    <div  class="cindextemplate">
        <div class="cindexdivtitle">新增我的应用</div>
        <div>名字：<input v-model="myaddmode.modename" type="text" placeholder="请输入名字"></div>
        <div>描述：<input v-model="myaddmode.describe" type="text" placeholder="请输入描述"></div>
        <div>跳转：<input v-model="myaddmode.path" type="text" placeholder="请输入跳转URL"></div>
        <div>图标：<input v-model="myaddmode.logo" type="text" placeholder="请输入图标URL"></div>
        <button @click="addmode(mymodeList,myaddmode)">新增</button>
    </div>
    <div  class="cindextemplate">
        <div class="cindexdivtitle">现有内置应用</div>
        <div class="cindexdiv" v-for="(item,i) in modeList" :key="i">
            <IndexMode :msg="item"/>
            <button class="cdelbtn cbtn" @click="delmode(modeList,i)">删除</button>
        </div>
    </div>
    <div  class="cindextemplate">
        <div class="cindexdivtitle">内置应用</div>
        <div class="cindexdiv" v-for="(item,i) in allmodeList" :key="i">
            <IndexMode :msg="item"/>
            <button class="cbtn" @click="addmode(modeList,item)">增加</button>
        </div>
    </div>
    <div class="pwlate" v-if="userid === 0">密码：<input type="password" v-model="password">(游客身份需要输入密码)</div>
    <button @click="save()" class="savebtn">保存</button>
</template>

<script>
import {ref, reactive } from "vue";
    import IndexMode from '../components/IndexMode.vue'
    import MyIndexMode from '../components/MyIndexMode.vue'
    export default {
        name: 'Config',
        components: {
            IndexMode,
            MyIndexMode
        },
        setup(){
            let modeList = reactive([])
            let mymodeList = reactive([])
            let allmodeList = reactive([
                // {
                //     modename:'匿名聊天室',
                //     describe:'超级TM简单只有文字！',
                //     logo:'icon-xiaoxi',
                //     path:'/nbr',
                //     newwin:true,
                //     out:false
                // },
                {
                    modename:'二维码工具',
                    describe:'识别和制作二维码，垃圾qq老是屏蔽！',
                    logo:'icon-erweima',
                    path:'/qrreadbuild',
                    newwin:true,
                    out:false
                },
                {
                    modename:'视频播放器',
                    describe:'视频播放器输入url播放',
                    logo:'icon-shipin',
                    path:'/videom3u8player',
                    newwin:true,
                    out:false
                },
                // {
                //     modename:'公开图床',
                //     describe:'不设浏览限制',
                //     logo:'icon-shipin',
                //     path:'/tuchuangpublic',
                //     newwin:true,
                //     out:false
                // },
            ])
            let myaddmode = reactive({
                    modename:'',
                    describe:'',
                    logo:'',
                    path:'',
                    newwin:true,
                    out:false
                })
            let password = ref('')
            let userid = ref('')
            return{
                modeList,
                mymodeList,
                allmodeList,
                myaddmode,
                password,
                userid
            }
        },
        async mounted(){
            let res = await this.axios.post("/getmodelist",{})
            console.log(res)
            this.userid = res.data.userid
            this.mymodeList.splice(0, this.mymodeList.length)
            for (let index = 0; index < res.data.mymodeList.length; index++) {
                const element = res.data.mymodeList[index];
                this.mymodeList.push(element)
            }
            this.modeList.splice(0, this.modeList.length)
            for (let index = 0; index < res.data.modeList.length; index++) {
                this.modeList.push(res.data.modeList[index])
            }
        },
        methods: {
            async save() {
                if(this.userid === 0 && this.password === ''){
                    pxmu.toast('请输入密码')
                    return
                }
                let data = {
                    password:this.md5(this.password),
                    modeList:this.modeList,
                    mymodeList:this.mymodeList
                }
                pxmu.loading({
                    msg: '正在保存', //loading信息 为空时不显示文本
                    close: false, // 自动关闭 为false时可在业务完成后调用 pxmu.closeload();手动关闭
                    inscroll: true, //模态 不可点击和滚动
                })
                let res = await this.axios.post("/setmodelist",data)
                //手动关闭
                pxmu.closeload(100);//延时100毫秒关闭 默认0
                console.log(res)
                if (res.data.code !== 200) {
                    pxmu.toast(res.data.msg)
                }
            },
            delmode(list,i){
                list.splice(i, 1)
            },
            modeup(list,i){
                if (i > 0) {
                    let mo1 = JSON.parse(JSON.stringify(list[i]))
                    let mo2 = JSON.parse(JSON.stringify(list[i-1]))
                    list[i-1] = mo1
                    list[i] = mo2
                }
            },
            addmode(list,item){
                let em = JSON.parse(JSON.stringify(item))
                let have = false
                for (let index = 0; index < list.length; index++) {
                    if (list[index].modename === em.modename) {
                        have = true
                    }
                }
                if (have) {
                    this.tipswin.error('已有同名应用',1000)
                } else {
                    list.push(em)
                }
            }
        }
    }
</script>
<style>
.cindexdivtitle{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 2em;
    background-color: gainsboro;
    color: rgb(155, 97, 231);
    width: 100%;
}
.cindextemplate{
    border: 5px solid gainsboro;
    margin-bottom: 1em;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
.pwlate{
    margin-bottom: 1em;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
.cindexdiv{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 22em;
}
.cdelbtn{
    background-color: brown;
}
.cdelbtn:hover{
    background: rgba(165, 42, 42, 0.685);
}
.upbtn{
    background-color: green;
}
.upbtn:hover{
    background: rgb(0, 88, 0);
}
.cbtn{
    width: 25em;
    margin-left: auto;
    margin-right: auto;
}
.savebtn{
    width: 100%;
    background:green;
}
.savebtn:hover{
    background: rgba(0, 128, 0, 0.705);
}
</style>